<!-- form表单操作 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 表单：由form包裹的一段可输入内容 -->
    <form action="">
      <div>基础信息</div>
      <!-- type: text/password/radio/checkbox -->
      <input type="password" />
      <button>提交</button>
    </form>
    <!-- action: 请求地址, method: 请求方法 -->
    <!-- get请求：参数直接在请求地址之后，用?连接，多个参数之间用&分隔， 适合少量的传输，隐私性差 -->
    <!-- post请求：参数不在地址上面，在请求body里， 多数据的传输 -->

    <form action="http://localhost:3000/products" method="GET">
      <!-- label的for与input的id关联，代表点击label文字可定位到对应的input -->
      <label for="searchInput">搜索:</label>
      <input
        type="text"
        id="searchInput"
        name="name"
        value="内容"
        placeholder="请输入检索内容"
        maxlength="6"
      />
      <!-- 单选 type="radio"-->
      <fieldset>
        <input
          type="radio"
          id="java"
          name="programmingLanguage"
          value="java"
          checked
        />
        <label for="java">Java</label>
        <input
          type="radio"
          id="python"
          name="programmingLanguage"
          value="python"
        />
        <label for="python">Python</label>
        <input
          type="radio"
          id="javascript"
          name="programmingLanguage"
          value="javascript"
        />
        <label for="javascript">JavaScript</label>
        <input
          type="radio"
          id="csharp"
          name="programmingLanguage"
          value="csharp"
        />
      </fieldset>

      <label for="name">搜索:</label>
      <input type="text" id="name" name="age" placeholder="请输入姓名" />
      <button type="submit">提交</button>
    </form>
    <form action="/submit" method="POST">
      <label for="username">⽤户名:</label>
      <input type="text" id="username" name="username" value="9090" />
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" />
      <!-- 隐藏域 -->
      <input type="hidden" name="user_id" value="123456" />
      <!-- ⽂本域 -->
      <!-- input: 单行输入，不支持自动换行
       textarea：多行输入，支持自动换行 -->
      <textarea
        id="message"
        name="message"
        rows="4"
        cols="50"
        width="50"
      ></textarea>
      <!-- option的selected属性：select默认选中的option -->
      <!-- disabled：禁用（编辑信息不允许更改） -->
      <select id="programmingLanguage" name="programmingLanguage">
        <option value="java">Java</option>
        <option value="python" selected>Python</option>
        <option value="javascript">JavaScript</option>
        <option value="csharp" disabled>C#</option>
      </select>
      <!-- type="submit"提交（将数据发送给后端）， type="reset"重置（将输入框数据回到初始值） -->
      <input type="submit" value="提交" />
      <input type="reset" name="" id="" />
      <!-- <button type="submit">登录</button> -->
    </form>
  </body>
  <script></script>
</html>
